<!DOCTYPE html>
<!--suppress ALL-->
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta name="description" content="seo">
    <meta name="keywords" content="keywords">
    <meta name="author" content="jiangtao">

    <title>老年人信息</title>
    <link th:href="@{/favicon.png}" type="image/x-icon" rel="shortcut icon">
    <link th:href="@{/static/assets/bootstrap/css/bootstrap.css}" rel="stylesheet" type="text/css">
    <link th:href="@{/static/assets/swiper/css/swiper.css}" rel="stylesheet" type="text/css">

    <script>
        var ctx = "[[@{/}]]";
    </script>
    <style>
        .container {
            padding: 0 !important;
        }
        .my-scrollbar::-webkit-scrollbar-thumb {
            background-color: #5776df;
            height:50px;
            outline-offset:-2px;
            outline:2px solid #fff;
            -webkit-border-radius: 4px;
            border:2px solid #fff
        }
        .my-scrollbar::-webkit-scrollbar-thumb:hover {
            background-color: #5776df;
            height:50px;
            -webkit-border-radius:4px
        }
        .my-scrollbar::-webkit-scrollbar {
            width:8px;
            height:8px
        }
        .my-scrollbar::-webkit-scrollbar-track-piece {
            background-color:#fff;
            -webkit-border-radius:0
        }
        .my-scrollbar::-webkit-scrollbar-thumb:active {
            height:50px;
            background-color: #fff;
            -webkit-border-radius:4px
        }
        .ui-tags span {
            display: inline-block;
        }

        .ui-tags > span {
            font-size: 14px;
            border: 1px solid #5776df;
        }

        .ui-tags > span:last-child {
            float: right;
        }

        .ui-tags > span > span {
            padding: 4px 7px;
            text-align: center;
        }

        .ui-tags > span > span:first-child {
            color: #fff;
            background-color: #5776df;
        }

        .my-card {
            margin-bottom: 20px;
        }

        .my-part > .my-card > .card-title {
            font-size: 18px;
            font-weight: bold;
            text-align: center;
            color: #5776df;
        }

        .part-1 .list-group {
            font-size: 16px;
        }

        .part-1 .list-group .list-group-item:first-child,
        .part-1 .list-group .list-group-item:last-child {
            border-radius: 0;
        }

        .part-1 .list-group .active {
            font-size: 16px;
            text-align: center;
            background-color: #fff;
            color: #5776df;
            border: 1px solid #ddd;
        }

        .part-2 {
            border-left: 1px solid #ddd;
            border-right: 1px solid #ddd;
        }

        .imgDiv {
            position: relative;
            z-index: 99;
        }

        .imgDiv .zyfw {
            position: absolute;
            z-index: 1000;
            top: 15px;
            left: 50%;
            margin-left: -30px;
            font-size: 16px;
            font-weight: bold;
            color: #5776df;
        }

        .imgDiv .leftCircle {
            position: relative;
            top: 50px;
            left: 134px;
            display: inline-block;
            width: 60px;
            height: 60px;
            background-color: #9873ed;
            border-radius: 60px;
            opacity: 0.3;
        }

        .imgDiv .rightCircle {
            display: inline-block;
            top: 50px;
            left: 115px;
            width: 60px;
            height: 60px;
            border-radius: 60px;
            background-color: #9873ed;
            position: relative;
            opacity: 0.3;
        }

        .imgDiv .oval {
            display: inline-block;
            position: relative;
            top: 33px;
            left: 45px;
            width: 27px;
            height: 27px;
            background-color: #9873ed;
            border-radius: 21px 0px;
            transform: rotate(-45deg);
            -ms-transform: rotate(-45deg);
            -moz-transform: rotate(-45deg);
            -webkit-transform: rotate(-45deg);
            -o-transform: rotate(-45deg);
        }

        .imgDiv .zyfw-num1 {
            position: absolute;
            z-index: 1000;
            top: 70px;
            right: 68%;
            font-size: 16px;
            color: #66cc00;
        }

        .imgDiv .zyfw-num2 {
            position: absolute;
            z-index: 1000;
            top: 70px;
            left: 70%;
            font-size: 16px;
            color: #777777;
        }

        .table th {
            text-align: center;
        }

        .table > thead > tr > th,
        .table > tbody > tr > td {
            vertical-align: middle;
        }
    </style>
</head>
<body>
<a href="#top"></a>
<div class="wrapper">
    <div class="header">
        <div class="container">
            <img th:src="@{/static/images/banner.png}" style="max-width: 1200px; width: 100%;">
        </div>
    </div>

    <div class="main" style="margin-top: 50px;">
        <div class="container">
            <div class="row">
                <div class="col-md-4 col-sm-4 my-part part-1">
                    <div class="my-card" style="margin-bottom: 24px;">
                        <div class="card-title" style="font-size: 20px">身份标签</div>
                    </div>

                    <div class="my-card">
                        <div class="card-body">
                            <div class="list-group">
                                <a href="#" class="list-group-item active"><b>政策保障</b></a>
                                <a href="javascript:chooseTag('老年综合津贴')" class="list-group-item">老年综合津贴<span class="badge">320</span></a>
                                <a href="javascript:chooseTag('三支回沪医疗补助')" class="list-group-item">三支回沪医疗补助<span class="badge">202</span></a>
                                <a href="javascript:chooseTag('银发无忧保险')" class="list-group-item">银发无忧保险<span class="badge">301</span></a>
                                <a href="javascript:chooseTag('养老服务补贴')" class="list-group-item">养老服务补贴<span class="badge">434</span></a>
                            </div>
                        </div>
                    </div>

                    <div class="my-card">
                        <div class="card-body">
                            <div class="list-group">
                                <a href="#" class="list-group-item active"><b>健康医疗</b></a>
                                <a href="#" class="list-group-item">长期护理保险<span class="badge">320</span></a>
                                <a href="#" class="list-group-item">家庭医生签约<span class="badge">3202</span></a>
                                <a href="#" class="list-group-item">家庭床位<span class="badge">301</span></a>
                                <a href="#" class="list-group-item">老年人体检<span class="badge">434</span></a>
                            </div>
                        </div>
                    </div>

                    <div class="my-card">
                        <div class="card-body">
                            <div class="list-group">
                                <a href="#" class="list-group-item active"><b>服务照料</b></a>
                                <a href="#" class="list-group-item">康乐福<span class="badge">320</span></a>
                                <a href="#" class="list-group-item">老伙伴服务对象<span class="badge">702</span></a>
                                <a href="#" class="list-group-item">老吾老计划<span class="badge">301</span></a>
                                <a href="#" class="list-group-item">过老化改造<span class="badge">434</span></a>
                                <a href="#" class="list-group-item">爬楼机租赁<span class="badge">845</span></a>
                                <a href="#" class="list-group-item">助餐<span class="badge">500</span></a>
                            </div>
                        </div>
                    </div>

                    <div class="my-card">
                        <div class="card-body">
                            <div class="list-group">
                                <a href="#" class="list-group-item active"><b>日常关爱</b></a>
                                <a href="#" class="list-group-item">元旦春节慰问<span class="badge">248</span></a>
                                <a href="#" class="list-group-item">夏送清凉慰问<span class="badge">345</span></a>
                                <a href="#" class="list-group-item">敬老节慰问<span class="badge">128</span></a>
                                <a href="#" class="list-group-item">百岁老人慰问<span class="badge">654</span></a>
                                <a href="#" class="list-group-item">长寿面<span class="badge">444</span></a>
                            </div>
                        </div>
                    </div>

                    <div class="my-card">
                        <div class="card-body">
                            <div class="list-group">
                                <a href="#" class="list-group-item active"><b>志愿服务</b></a>
                                <a href="#" class="list-group-item">老伙伴志愿者<span class="badge">1522</span></a>
                                <a href="#" class="list-group-item">时间银行<span class="badge">2545</span></a>
                            </div>
                        </div>
                    </div>

                    <div class="my-card">
                        <div class="card-body">
                            <div class="list-group">
                                <a href="#" class="list-group-item active"><b>其他服务</b></a>
                                <a href="#" class="list-group-item">残疾人两项补贴<span class="badge">90</span></a>
                                <a href="#" class="list-group-item">计生<span class="badge">20</span></a>
                                <a href="#" class="list-group-item">救助帮困<span class="badge">70</span></a>
                                <a href="#" class="list-group-item">双拥<span class="badge">50</span></a>
                            </div>
                        </div>
                    </div>

                </div>

                <div class="col-md-4 col-sm-4 my-part part-2">
                    <div class="my-card">
                        <div class="card-body">
                            <div class="rk-data ui-tags">
                                <span id="town1"><span>全镇人口总数</span><span>42000人</span></span>
                                <span id="town2" style="display: none;"><span style="color: #333;">常住人口总数</span><span style="color: red;">52000人</span></span>
                                <span><span>全年经费投入</span><span>￥4,544,488</span></span>
                            </div>
                        </div>
                    </div>
                    <div class="my-card">
                        <div class="card-body">
                            <div id="chart21" style="height: 216px; background-color:#fafcfe;"></div>
                        </div>
                    </div>
                    <div class="my-card">
                        <div class="card-body">
                            <div id="chart22" style="height: 216px; background-color:#fafcfe;"></div>
                        </div>
                    </div>
                    <div class="my-card">
                        <div class="card-body">
                            <div id="chart23" style="height: 302px; background-color:#fafcfe;"></div>
                        </div>
                    </div>
                    <div class="my-card">
                        <div class="card-body">
                            <div id="chart24" style="height: 259px; background-color:#fafcfe;"></div>
                        </div>
                    </div>
                    <div class="my-card">
                        <div class="card-body" data-src="https://blog.csdn.net/qiuyufeng/article/details/101409665">
                            <div id="chart25" class="imgDiv" style="height: 133px; background-color:#fafcfe;">
                                <div class="zyfw">志愿服务</div>
                                <div class="leftCircle leftSelect"></div>
                                <div class="rightCircle rightSelect"></div>
                                <div class="oval" style="border: 1px solid white;"></div>
                                <div class="zyfw-num1">1522</div>
                                <div class="zyfw-num2">2545</div>
                            </div>
                        </div>
                    </div>

                    <div class="my-card">
                        <div class="card-body">
                            <div id="chart26" style="height: 216px; background-color:#fafcfe;"></div>
                        </div>
                    </div>
                </div>

                <div class="col-md-4 col-sm-4 my-part part-3">
                    <div class="my-card" style="margin-bottom: 24px;">
                        <div class="card-title" style="font-size: 20px">服务分布</div>
                    </div>
                    <div class="my-card">
                        <div class="card-body">
                            <div class="my-scrollbar" style="max-height: 660px; overflow-y: auto;">
                                <table style="margin-bottom: 0;" class="table table-bordered table-hover table-responsive text-center">
                                    <thead>
                                    <tr class="text-center">
                                        <th rowspan="2">居委</th>
                                        <th rowspan="2">项目</th>
                                        <th colspan="3">服务人数</th>
                                    </tr>
                                    <tr>
                                        <th>2018</th>
                                        <th>2019</th>
                                        <th>2020</th>
                                    </tr>
                                    </thead>
                                    <tbody id="tbody1">
                                    <tr>
                                        <td colspan="5" align="center">暂无数据</td>
                                    </tr>
                                    </tbody>
                                </table>
                            </div>
                            <div class="text-right" style="margin-top: 10px;">
                                <button class="btn btn-info"><span class="glyphicon glyphicon-export"></span> 导出名单</button>
                            </div>
                        </div>
                    </div>
                    <hr>
                    <div class="my-card" style="margin-bottom: 24px;">
                        <div class="card-title" style="font-size: 20px">未享受项目</div>
                    </div>
                    <div class="my-card">
                        <div class="card-body">
                            <div class="my-scrollbar" style="max-height: 660px; overflow-y: auto;">
                                <table class="table table-bordered table-hover table-responsive text-center">
                                    <thead>
                                    <tr class="text-center">
                                        <th rowspan="2">居委</th>
                                        <th rowspan="2">项目</th>
                                        <th>操作</th>
                                    </tr>
                                    </thead>
                                    <tbody id="tbody2">
                                    <tr>
                                        <td colspan="3" align="center">暂无数据</td>
                                    </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="clearfix"></div>
            </div>
        </div>
        <div style="height: 50px;"></div>
    </div>
</div>

<script th:src="@{/static/js/jquery.min.js}"></script>
<script th:src="@{/static/assets/bootstrap/js/bootstrap.min.js}"></script>

<script th:src="@{/static/assets/echarts/echarts.js}"></script>
<script th:src="@{/static/js/service.js}"></script>

<script>
    chart21();
    chart22();
    chart23();
    chart24();
    chart26();
</script>
<script>
    var tTimer = null;
    tTimer = setTimeout(timeFunc, 1000);
    function timeFunc() {
        var now = new Date().getTime();
        if (now % 6 == 0 || now % 6 == 1 || now % 6 == 2) {
            $('#town1').show();
            $('#town2').hide();
        } else {
            $('#town2').show();
            $('#town1').hide();
        }
        clearTimeout(tTimer);
        tTimer = setTimeout(timeFunc, 1000);
    }
</script>
<script>
    var sData = ["东街居委会",
        "西街居委会",
        "莘松一村居委会",
        "莘松三村居委会",
        "莘松四村居委会",
        "莘松五村居委会",
        "莘松九村居委会",
        "绿梅一村居委会",
        "绿梅二村居委会",
        "绿梅三村居委会",
        "水清一村居委会",
        "水清三村居委会",
        "报春新村第一居委会",
        "报春新村第二居委会",
        "佳佳花园居委会",
        "黎安新村第一居委会",
        "黎安新村第二居委会",
        "西湖苑居委会",
        "沁春园第二居委会",
        "新梅花苑居委会",
        "绿世界花园居委会",
        "星丰苑居委会",
        "莘南花苑居委会",
        "莘城公寓居委会",
        "团结花苑居委会",
        "宝安新苑居委会",
        "新申花城居委会",
        "众众家园居委会",
        "莘城苑居委会",
        "丽华公寓居委会",
        "圣淘沙花园居委会",
        "莘纪苑居委会",
        "新梅广场居委会",
        "虹莘新村居委会",
        "春申新村居委会",
        "香树丽舍居委会",
        "沁春园第一居委会",
        "西环新村居委会",
        "世纪名门居委会",
        "名都新城居委会",
        "阳明花苑居委会",
        "康城第一居委会",
        "世纪阳光苑居委会",
        "春申复地城居委会",
        "春申万科城居委会",
        "东苑新天地居委会",
        "东苑利华苑居委会",
        "沁春园第三居委会",
        "都市星城居委会",
        "上海康城第二居委会",
        "邻里苑居委会",
        "康城第三居委会",
        "康城第四居委会",
        "莘北村",
        "青春村"];

    function chooseTag(tag) {
        var html1 = '', html2 = '';
        for (var i = 0; i < sData.length; i++) {
            html1 += '<tr>';
            html1 += '<td>' + sData[i] + '</td>';
            html1 += '<td>' + tag + '</td>';
            html1 += '<td>' + randomNum(100, 500) + '</td>';
            html1 += '<td>' + randomNum(100, 500) + '</td>';
            html1 += '<td>' + randomNum(100, 500) + '</td>';
            html1 += '</tr>';

            html2 += '<tr>';
            html2 += '<td>' + sData[i] + '</td>';
            html2 += '<td>' + tag + '</td>';
            html2 += '<td><a href="">导出</a></td>';
            html2 += '</tr>';
        }
        $('#tbody1').html(html1);
        $('#tbody2').html(html2);
    }

    function randomNum(minNum, maxNum) {
        switch (arguments.length) {
            case 1:
                return parseInt(Math.random() * minNum + 1, 10);
                break;
            case 2:
                return parseInt(Math.random() * (maxNum - minNum + 1) + minNum, 10);
                //或者 Math.floor(Math.random()*( maxNum - minNum + 1 ) + minNum );
                break;
            default:
                return 0;
                break;
        }
    }

</script>
</body>
</html>